<template>
  <div class="publish-post">
    <x-header :left-options="{preventGoBack: true}" @on-click-back="back">发帖子</x-header>
    <group>
      <x-textarea :max="800" :rows="5"  v-model="content" placeholder="分享菜园新鲜事..." ></x-textarea>
    </group>
    <group>
      <!-- <uploader
        :max="10"
        :images="images"
        :handleClick="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        multiple="multiple"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage :imglist.sync="images"></uploadImage>
    </group>
    <group>
       <popup-picker title="选择版块" :data="typeList" :columns="2" v-model="typeVal"></popup-picker>
    </group>
    <x-button class="publish-btn" type="primary" @click.native="handlePublish">发布</x-button>
    <confirm v-model="showPublishConfirm" title="发帖提示" @on-confirm="doPublish">
      <p style="text-align:center;">法律风险提示</p>
    </confirm>
    <confirm v-model="showGiveUp" title="提示" @on-confirm="giveUpPost">
      <p style="text-align:center;">确定要放弃发帖吗？</p>
    </confirm>
    <transition name="bounce">
      <div class="img-enlarge" v-show="imgEnLarge" @click="handleImgEnlarge">
        <img class="img" v-lazy="imgUrl" :src="imgUrl" alt="">
      </div>
    </transition>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import { upload } from '../../api/'
import { XHeader, XTextarea, Group, Actionsheet, Confirm, PopupPicker, XButton } from 'vux';
const IndexStore = namespace('publish');

@Component({
  components: { XHeader, XTextarea, Group, Actionsheet, Confirm, PopupPicker, XButton, uploadImage }
})
export default class PublishPost extends Vue {
  @IndexStore.Action getCreatePost
  showConfirm1 = false
  showConfirm2 = false
  imgEnLarge = false
  typeVal = []
  images = []
  imgUrl = ''
  uploadUrl = upload
  params = {}
  showPublishConfirm = false
  showGiveUp = false
  content = ''
  typeList = [{
    name: '话题',
    value: '话题',
    parent: 0
  }, {
    name: '信息',
    value: '信息',
    parent: 0
  }, {
    name: '菜缘',
    value: '菜缘',
    parent: 0
  }, {
    name: '学习',
    value: '学习',
    parent: 0
  },
  {
    name: '吃喝玩乐',
    value: '吃喝玩乐',
    parent: '话题'
  }, {
    name: '校园资讯',
    value: '校园资讯',
    parent: '话题'
  }, {
    name: '八卦趣事',
    value: '八卦趣事',
    parent: '话题'
  }, {
    name: '创新创业',
    value: '创新创业',
    parent: '话题'
  }, {
    name: '家教兼职',
    value: '家教兼职',
    parent: '信息'
  }, {
    name: '实习招聘',
    value: '实习招聘',
    parent: '信息'
  }, {
    name: '失物招领',
    value: '失物招领',
    parent: '信息'
  }, {
    name: '约约看',
    value: '约约看',
    parent: '菜缘'
  }, {
    name: '表白墙',
    value: '表白墙',
    parent: '菜缘'
  }, {
    name: '出国',
    value: '出国',
    parent: '学习'
  }, {
    name: '考证',
    value: '考证',
    parent: '学习'
  }, {
    name: '考研',
    value: '考研',
    parent: '学习'
  }, {
    name: '语言',
    value: '语言',
    parent: '学习'
  }, {
    name: '考试',
    value: '考试',
    parent: '学习'
  }, {
    name: '技能',
    value: '技能',
    parent: '学习'
  }]
  handlePublish () {
    let flag = true
    if (this.typeVal.length === 0) {
      flag = false
      this.$vux.toast.text('请选择版块', 'middle')
    }
    if (this.content === '') {
      flag = false
      this.$vux.toast.text('请填写帖子内容', 'middle')
    }
    if (flag) {
      this.showPublishConfirm = true
    }
  }
  back () {
    if (this.content !== '' || this.category !== '' || this.images.length > 0) {
      this.showGiveUp = true
    } else {
      this.$router.go(-1)
    }
  }
  giveUpPost () {
    this.showGiveUp = false
    this.$router.go(-1)
  }
  doPublish () {
    const params = {
      content: `${this.content}`,
      category: this.typeVal[0],
      secCategory: this.typeVal[1],
      type: 0,
      imgs: this.images
    }
    this.getCreatePost(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        localStorage.setItem('type', 0)
        this.$router.push(`/secondhandlist/${this.typeVal[1]}`)
        this.$vux.toast.text('发布成功', 'middle');
      }
    })
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
}
</script>
<style lang="less">
  .publish-post {
    padding-top: 46px;
    .publish-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .weui-panel {
      margin-top: 0;
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .weui-uploader__title {
      color: #999999;
      font-size: 14px;
    }
    .weui-textarea{
      padding: 0 30px;
      box-sizing: border-box;
    }
  }
</style>
